<script>
  import { MeshTransmissionMaterial } from './TransmissionMaterial';
  import { T, Three, useFrame, OrbitControls } from '@threlte/core';
  import { Float } from '@threlte/extras';
  import StarField from './StarField.svelte';
  import Effects from './Effects.svelte';
  let r = 0;
  useFrame((_, delta) => {
    r += 0.5 * delta;
  })
</script>


<Float>
  <T.PerspectiveCamera makeDefault position.y={10} position.z={400} fov={35}>
    <OrbitControls
      autoRotate
      enableDamping
      zoomSpeed={0.25}
      autoRotateSpeed={0.375}
    />
  </T.PerspectiveCamera>
</Float>

<T.DirectionalLight intensity={2} />
<T.AmbientLight intensity={2} />

<T.Mesh scale={40}>
  <T.SphereGeometry />
  <Three
    type={MeshTransmissionMaterial}
    args={[10]}
    clearcoat={1}
    clearcoatRoughness={0}
    transmission={1}
    chromaticAberration={0.1}
    roughness={0}
    thickness={4.5}
    ior={1.5}
    distortion={0.1}
    distortionScale={0.2}
    temporalDistortion={0.2}
    side={2}
  />
</T.Mesh>

<T.Mesh rotation.x={r} rotation.y={r} rotation.z={r} scale={1}>
  <T.TorusKnotGeometry args={[1, 0.25, 128, 128]}/>
  <T.MeshStandardMaterial color="deeppink" />
</T.Mesh>

<T.GridHelper rotation.y={Math.PI / 4} args={[50, 50, "lime", "#ffffff"]} />

<!-- Background -->
<T.Mesh>
  <T.SphereGeometry args={[400]}/>
  <T.MeshBasicMaterial color="#050505" side={1}/>
</T.Mesh>
<StarField count={1000} innerRadius={100} outerRadius={390}/>

<Effects />
